<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>work 09</title>
    <!-- css文件插入 -->
    <link rel="stylesheet" href="../work10_15/style.css">
    </link>
    <!-- 文件引入可以放在head 或者 body里 -->
    <script src="../work10_15/demo.js"></script>
</head>

<body>
    <div id="outer1" class="outer">
        outer
        <div id="middle1" class="middle">
            middle
            <div id="inner1" class="inner">
                事件冒泡演示
            </div>
        </div>
    </div>

    <div id="outer2" class="outer">
        outer
        <div id="middle2" class="middle">
            middle
            <div id="inner2" class="inner">
                事件捕获演示
            </div>
        </div>
    </div>

    <div>
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>橙子</li>
            <li>葡萄</li>
        </ul>
    </div>

    <div id="out">
        外部
        <div id="in">
            内部
            <p style="text-align: center;color: white;">阻止冒泡演示</p>
        </div>
    </div>

    <div id="div3">
        <a href="https://www.baidu.com/">百度超链接跳转</a>
    </div>
</body>

</html>